<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>骑手位置查看</title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        * {
            margin: 0px;
            padding: 0px;
        }

        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        var init = function () {
            var center = new qq.maps.LatLng("{$list.lat|default=0}", "{$list.lon|default=0}");
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 15
            });
            var label = new qq.maps.Label({
                position: center,
                map: map,
                content: '骑手位置'
            });
            var anchor = new qq.maps.Point(10, 30);
            var size = new qq.maps.Size(32, 30);
            var origin = new qq.maps.Point(0, 0);
            var icon = new qq.maps.MarkerImage('https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/plane.png', size, origin, anchor);
            size = new qq.maps.Size(52, 30);
            var originShadow = new qq.maps.Point(32, 0);
            var shadow = new qq.maps.MarkerImage(
                'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/plane.png',
                size,
                originShadow,
                anchor
            );

            var marker = new qq.maps.Marker({
                icon: icon,
                shadow: shadow,
                map: map,
                position: center,
                animation: qq.maps.MarkerAnimation.BOUNCE
            });

            var jump = function (event) {
                marker.setPosition(event.latLng);
            };

            qq.maps.event.addListener(map, 'click', jump);
        }
    </script>
</head>

<body onload="init()">
    <div id="container"></div>
    <p id="info" style="margin-top:10px;"></p>
</body>

</html>